<template>
  <div class="container">
    <div class="main">
      <div class="left">
        <img
          src="https://img14.360buyimg.com/n0/jfs/t1/213134/2/5810/235377/61a04e11E494c1321/b1c6d6865f8130f2.jpg"
          alt=""
        />
      </div>
      <div class="right">
        <span class="conmenDiv title">这是xxx</span>
        <div class="conmenDiv price">商品价格:123$</div>
        <div class="conmenDiv sales"></div>
        <p class="commen"><i class="titiles">重量</i>不记重量</span>
        <p class="commen"><i class="titiles">增值业务</i>免费上门</span>
<div class="conmenDiv sals">月销量<span>1万+</span></div>
        <div class="conmenDiv kinds">
          <ul>
            选择系列
            <li @click="handleKinds">11</li>
            <li>111</li>
            <li>333</li>
          </ul>
        </div>
         <div class="conmenDiv address">
         <span>数量 :</span> <el-input-number class="num-box" v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
        </div>
        <div class="btn conmenDiv ">
         <el-button type="danger" v-for="item in btnList " :plain="item['plain']" @click=" handleBtn(item['name'])">{{item['text']}}</el-button>
        </div>
      </div>
    </div>
    <div class="bottom"><div class="top"><span>省钱商城乐翻天</span> <span>这里什么都 能找到</span><span>欢乐每一天</span></div></div>
  </div>
</template>

<script>
export default {
  name: "service",
  data() {
    return {
      ids: 0,
      num: 1,
      btnList: [
        { text: "立即购买", name: "buy", plain: false },
        { text: "加入购物车", name: "add", plain: true },
      ],
    };
  },
  mounted() {
    console.log(this.$route.query.uname);
  },
  methods: {
    // 选择商品类型系列
    handleKinds() {},
    handleBtn(name) {},
  },
};
</script>

<style scoped lang='less'>
.container {
  max-height: 150vh;
  width: 100%;
  .main {
    display: flex;
    padding-top: 15px;
    .left {
      margin-left: 3rem;
      img {
        width: 30rem;
        height: 30rem;
      }
    }
    .right {
      width: 60%;
      text-align: left;
      padding-left: 2.5rem;
      font-size: 2rem;
      .title {
        background-image: linear-gradient(to right, orange, purple);
        -webkit-background-clip: text;
        color: transparent;
      }
      .conmenDiv {
        width: 100%;
        margin: 1rem 0;
      }
      .address {
        height: 50px;
        font-size: 2.5rem;
        line-height: 50px;
      }
      .commen {
        margin: 1.5rem 0;
        font-size: 1.5rem;
      }
      .titiles {
        font-style: normal;
        color: #df3033;
        margin-right: 1rem;
      }
      .sals {
        text-align: center;
        font-size: 2rem;
        border-top: 2px dotted #c9c9c9;
        border-bottom: 2px dotted #c9c9c9;
        padding: 10px 0;
        span {
          margin-left: 10px;
          color: #ff0036;
          font-weight: bold;
        }
      }
      .kinds {
        ul {
          width: 50%;
          display: flex;
          justify-content: space-between;
          font-size: 1.5rem;
          li {
            margin: 0 1rem;
            border: 1px solid #e3393c;
          }
        }
      }
    }
  }
  .bottom {
    font-size: 2.5rem;
  }
}
</style>
